import React from 'react';
import OptionSection from './OptionSection';
import styled from 'styled-components';
import 'react-modern-calendar-datepicker/lib/DatePicker.css';
import DatePicker from 'react-modern-calendar-datepicker'
import dayjs from 'dayjs';

const DatePickerWrapper = styled.div`
   
    & input {
        width: 65vw;
        border: 0;
        text-align: center;
        color: #FD9A16;
        font-size: 1.5em;
    }
    
    .responsive-calendar {
        --cl-color-error: #2966C1;
        right: 10px;
        font-size: 10px !important;
    }
    
    @media (max-width: 1500px) {
      .responsive-calendar {
        font-size: 9px !important;
      }
    }

    @media (max-width: 1200px) {
      .responsive-calendar {
        font-size: 8px !important;
      }
    }
    
    @media (max-width: 768px) {
      .responsive-calendar {
        font-size: 7px !important;
      }
    }
    
    /* Large screens */
    @media (min-width: 2500px) {
      .responsive-calendar {
        font-size: 13px !important;
      }
    }
`

type Props = {
    selectedDate: { day: number, month : number, year : number },
    onSelectedDateChange: Function
}

const PickDate:React.FC<Props> = (props) => {

    let today = {
        day: dayjs().date(),
        month: dayjs().month() + 1,
        year: dayjs().year()
    }

    function handleChange(event: { day: number, month : number, year : number }) {
        props.onSelectedDateChange(event)
    }

    return (
        <OptionSection iconName="calendar" labelName="日期">
            <DatePickerWrapper>
                <DatePicker
                    value={props.selectedDate}
                    onChange={handleChange}
                    inputPlaceholder="选个好日子"
                    shouldHighlightWeekends
                    colorPrimary="#FD9A16"
                    maximumDate={today}
                    calendarClassName="responsive-calendar"
                />
            </DatePickerWrapper>
        </OptionSection>
    );
}

export default PickDate